<!--表格-->
<template>
  <div>
    <slot name="toolbar"></slot>
    <el-table
        :data="data"
        ref="table"
        :row-key="rowKeyFn"
        :response-prop="responsePropFunction()"
        :one-screen="oneScreen"
        :height="height"
        :bottom="32"
        :dialog-fullscreen="fullScreen"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        :show-pagination="showPagination"
        :total="pageTotal"
        :page-size="pageSize"
        :row-class-name="rowClassName"
        :data-processor="dataProcessorHandle"
        v-loading="loading"
        :header-cell-class-name="setHeaderCellClassName"
        @size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
        @row-click="handleRowClick"
        :show-header="showHeader"
        :stripe="stripe"
    >
      <el-table-column
          v-if="getSelectColumn"
          type="selection"
          :fixed="getSelectColumn.fixed"
          :selectable="checkSelectable"
          :reserve-selection="true"
      ></el-table-column>
      <el-table-column v-if="getSelectColumnIndex" type="index" :fixed="getSelectColumnIndex.fixed"></el-table-column>
      <el-table-column
          v-for="(item, index) in getColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth || '100px'"
          :fixed="item.fixed"
          :sortable="item.sort"
          :show-overflow-tooltip="!item.hideTooltip"
      >
        <template slot-scope="scope">
          <div v-if="!item.operation && !item.render" :class="item.classFn ? item.classFn(scope.row) : ''" class="overflow-style">
            {{ item.formatter ? item.formatter(scope.row, item) : scope.row[item.prop] }}
          </div>
          <vt-render
              v-else-if="!item.operation && item.render"
              :render="item.render"
              :row="scope.row"
              :index="scope.$index"
              :column="item"
          ></vt-render>
          <div v-else class="overflow-style">
						<span v-if="getShowOperation(item.operation, scope.row).length < 4">
							<span
                  v-for="(o, key) in getShowOperation(item.operation, scope.row)"
                  :key="key"
                  class="operate-button-group cursor-pointer"
                  @click.stop="o.click(scope.row, scope.$index, item)"
              >
								<img v-if="o.type === 'image'" :src="o.image" alt="" />
								<el-button v-else type="text" class="text-button" :disabled="o.getDisabled ? o.getDisabled(scope.row) : false">{{
                    o.label
                                                                                                                               }}</el-button>
							</span>
						</span>
            <span v-else>
							<span v-for="(o, key) in firstToThreeOperation(getShowOperation(item.operation, scope.row))" :key="key" class="operate-button-group">
								<!--  <a href="javascript:void(0);" @click="o.click(scope.row, scope.$index, item)" class="text-button">{{o.label}}</a> -->
								<el-button
                    type="text"
                    @click="o.click(scope.row, scope.$index, item)"
                    class="text-button"
                    :disabled="o.getDisabled ? o.getDisabled(scope.row) : false"
                >{{ o.label }}</el-button
                >
							</span>
							<el-dropdown v-if="afterThreeOperation(getShowOperation(item.operation, scope.row)).length" class="dropdown-content">
								<span class="el-dropdown-link"> 更多 <i class="el-icon-caret-bottom"></i> </span>
								<el-dropdown-menu slot="dropdown">
									<span v-for="(o, key) in afterThreeOperation(getShowOperation(item.operation, scope.row))" :key="key">
										<el-dropdown-item class="text-button" @click.native="o.click(scope.row, scope.$index, item)">{{ o.label }}</el-dropdown-item>
									</span>
								</el-dropdown-menu>
							</el-dropdown>
						</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  Table as elTable,
  TableColumn as elTableColumn,
  Button as elButton,
  Dropdown as elDropdown,
  DropdownMenu as elDropdownMenu,
  DropdownItem as elDropdownItem,
} from "element-ui"
import { nanoid } from 'nanoid';

export default {
  name:'VtTable',
  props: {
    rowKey: {
      type: String,
      default: 'id',
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    height: {},
    pks: {
      type: Array,
      default: () => {
        return ['id'];
      },
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    oneScreen: {
      type: Boolean,
      default: true,
    },
    fullScreen: {
      type: Boolean,
      default: true,
    },
    responseProp: {
      type: Object,
      default() {
        return {};
      },
    },
    dataHandle: {
      type: Function,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    pageTotal: {
      type: Number,
      default: 20,
    },
    size: {
      type: Number,
      default: 20,
    },
    operateNum: {
      type: Number,
      default: 3,
    },
    checkSelectable: {
      type: Function,
      default: () => {
        return true;
      },
    },
    stripe: {
      type: Boolean,
      default: false,
    },
  },
  components:{
    elTable,
    elTableColumn,
    elButton,
    elDropdown,
    elDropdownMenu,
    elDropdownItem,
  },
  computed: {
    getSelectColumn() {
      return this.columns.find((item) => item.type === 'selection' && !item.hide);
    },
    getSelectColumnIndex() {
      return this.columns.find((item) => item.type === 'index' && !item.hide);
    },
    getColumns() {
      return this.columns.filter((item) => item.type !== 'selection' && item.type !== 'index' && !item.hide);
    },
    getShowOperation() {
      return (operation, row) => {
        return operation.filter((item) => !item.hide).filter((item) => !item.showIf || (item.showIf && item.showIf(row)));
      };
    },
  },
  data() {
    return {
      currentPage: 1, // 表格当前页数
      pageSize: this.size || 20, // 每页条数
      tableKey: '',
    };
  },
  methods: {
    rowKeyFn(row) {
      return row[this.rowKey] || nanoid();
    },
    responsePropFunction() {
      // if (this.$refs.table && this.$refs.table.$refs) {
      //   this.$refs.table.$refs.elTable.doLayout()
      //   console.log(this.$refs.table.$refs.elTable);
      // }
      return this.responseProp;
    },
    /**
     * 按钮较多时前4个显示按钮列表
     **/
    firstToThreeOperation(list) {
      return list.filter((item, index) => {
        if (index < this.operateNum) {
          return true;
        }
      });
    },
    /**
     * 按钮较多时第4个之后的显示按钮列表
     **/
    afterThreeOperation(list) {
      return list.filter((item, index) => {
        if (index >= this.operateNum) {
          return true;
        }
      });
    },
    /**
     * 表格选中
     **/
    handleSelectionChange(rows) {
      this.$emit('selectionChange', rows);
    },
    /**
     * 表格排序
     **/
    handleSortChange(sort) {
      this.$emit('sortChange', sort);
    },
    /**
     * 改变每页数量
     **/
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit('pageSizeChange', val);
    },
    /**
     * 改变当前选中页数
     **/
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('currentPageChange', val);
    },
    setHeaderCellClassName({ column, columnIndex }) {
      let index;
      if (this.getSelectColumn) {
        if (column.type === 'selection') {
          return '';
        }
        index = columnIndex - 1;
      } else if (this.getSelectColumnIndex) {
        if (column.type === 'index') {
          return '';
        }
        index = columnIndex - 1;
      } else {
        index = columnIndex;
      }
      let columns = this.getColumns;
      let _column = columns[index];
      return _column ? _column.className || '' : '';
    },
    /**
     * 行单击
     **/
    handleRowClick(row) {
      this.$emit('rowClick', row);
    },
    /**
     * 行样式
     **/
    rowClassName({ row }) {
      if (['DamGbStandardBocdApplyPo', 'DamGbDimBocdApplyPo', 'DpDevKpiYgbxApplyPo'].includes(row.discriminator)) {
        return 'row-table-abolised';
      }
      /* if (row.standardStatus === "ABOLISH") {
                    return 'row-table-grey';
                } */
      return row.className || '';
    },
    /**
     * 返回数据处理
     **/
    dataProcessorHandle(content) {
      if (!content) {
        return [];
      }
      let data = content;
      if (this.dataHandle) {
        data = this.dataHandle(data);
      }
      this.$emit('processor', data);
      return data;
    },
    toggleRowSelection(row, selected) {
      this.$refs.table.toggleRowSelection(row, selected);
    },

    /**
     * 全选择
     */
    toggleAllSelection(){
      this.$refs.table.toggleAllSelection()
    },
    clearSelection(){
      this.$refs.table.clearSelection()
    }
  },
};
</script>
